<!-- coinList 组件 -->
<template>
	<view class="list">
		<view class="coin">
			<u-icon name="info-circle-fill"></u-icon>
			<text>币安</text>
		</view>
		<view class="head">
			<text>币种名称</text>
			<text>最新价</text>
			<text>涨跌幅</text>
		</view>
		<view class="item" v-for="(item, index) in marketList" :key="index">
			<view>
				<text v-text="item.baseCurrencyName" class="base"></text>
				<text class="quote">/{{item.quoteCurrencyName}}</text>
			</view>
			<text>{{ item.close }}</text>
			<u-button type="error" size="mini" v-if="item.change < 0">{{ item.change }}%</u-button>
			<u-button type="success" size="mini" v-else>+{{ item.change }}%</u-button>
		</view>
	</view>
</template>

<script>
	import common from "@/common/common.js";
	export default {
		name: "coinList",
		data() {
			return {
				// 列表
				marketList: [],
				recommentMarketList: [],
			};
		},

		components: {},

		computed: {},

		mounted() {
			var _self = this;
			this.initRecommentMarketList();
			/* setInterval(function () {
			  _self.initRecommentMarketList();
			}, 3000); */
		},

		methods: {
			initRecommentMarketList() {
				var timestamp = Date.parse(new Date()); //例如：1280977330000
				// console.log("重载所有交易对行情");
				uni.request({
					url: common.tokenurl + "/m/allticker/" + timestamp,
					method: "GET",
					data: {},
					success: (res) => {
						uni.hideLoading();
						var data = res.data.data;
						var list_top = [];
						var tickers2 = [];
						var list_rise = [];
						var usdtprice = this.getUsdtPrice(data);
						for (var key in data) {
							var object = data[key];

							if (object.close && object.open) {
								object.change = (
									((object.close - object.open) / object.open) *
									100
								).toFixed(2);
							} else {
								object.change = 0;
							}
							if (
								object.symbol === "btcusdt" ||
								object.symbol === "ethusdt" ||
								object.symbol === "bchusdt"
							) {
								object.cnyprice = (object.close * usdtprice).toFixed(2);
								list_top.push(object);
							}
							if (
								object.symbol === "bdbqc" ||
								object.symbol === "mesqc" ||
								object.symbol === "usdtqc"
							) {
								object.cnyprice = object.close.toFixed(object.pricePrecision);
								list_top.push(object);
							}

							// 格式化：24小时量，避免太长
							if (object.volume > 1000) {
								object.volume = (object.volume / 1000).toFixed(0) + "k";
							} else {
								object.volume = object.volume.toFixed(0);
							}

							tickers2.push(object);
							list_rise.push(object);
						}
						this.recommentMarketList = list_top;

						// uni.setStorageSync("tickers", JSON.stringify(list_rise));
						// uni.setStorageSync("usdtprice", usdtprice);
						//this.setTickers(tickers2);
						// this.setUsdtprice(usdtprice);
						//console.log("tab1:tickers:" + JSON.stringify(this.tickers))
						// 排序
						this.marketList = list_rise
							.sort(function(a, b) {
								return b.change - a.change;
							})
							.slice(0, 10);
						console.log('success', this.marketList)
					},
					fail: (err) => {
						console.log("请求失败", err);
					},
				});
			},
			getUsdtPrice(data) {
				for (var key in data) {
					if (data[key].symbol === "usdtqc") {
						return data[key].close;
					}
				}
				return 0;
			},
		},
	};
</script>
<style lang='scss' scoped>
	// 列表
	.list {
		display: flex;
		flex-direction: column;
		padding: 0 25rpx;
		color: aliceblue;
		padding-bottom: 130rpx;

		.coin {
			display: flex;
			margin: 20rpx 5rpx;
			background-color: #151e3d;
			min-height: 60rpx;
			align-items: center;
			padding: 20rpx;

			text {
				margin-left: 20rpx;
			}
		}

		.head {
			color: #6e6c82;
			display: flex;
			min-width: 300rpx;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 0rpx;
			padding: 10rpx;
			font-size: 24rpx;

			text {
				text-align: center;
			}
		}

		.item {
			display: flex;
			min-width: 250rpx;
			min-height: 125rpx;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx;

			.quote {
				font-size: 22rpx;
				color: rgb(97, 122, 126);
			}

			.u-btn {
				margin: 0;
				font-size: 28rpx;
			}

			.pad {
				border-radius: 10rpx;
			}
		}
	}
</style>
